<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Eternity
  Date: 2020/9/28
  Time: 11:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script>
        //添加ajax
        function subBtn() {
            //获取表单内容
            var stuName=$("[name=stuName]").val()
            var stuPhone=$("[name=stuPhone]").val()
            if(stuName == ""){
                alert("姓名不能为空！！")
                return false;
            }
            if(stuPhone == ""){
                alert("电话不能为空！！")
                return false;
            }
            $.ajax({
                //请求路径
                url:"/student/addStudent",
                //请求参数
                data:{
                   stuName:stuName,
                   stuPhone:stuPhone
                },
                type:"post",
                dataType:"json",
                success:function (data) {
                    window.location.href="/student/findStudent"
                },error:function () {
                    alert("系统异常！请稍后重试")
                }

            })
        }

        //禁用功能
        $(function () {
            $("ul.pagination li.disabled a").click(function () {
                return false;
            })
        })


    </script>

</head>
<body>
<%--头部信息--%>
<jsp:include page="hade.jsp"/>

<div class="container">

    <%--账号的类型accounnt.type--%>
    <input type="hidden" value="${user.type}" id="type">
    <h2>欢迎${user.names}登录后台管理系统</h2>
    <p>勾正商品管理系统--->用户信息管理</p>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增学籍</button>
    <a href="/user/userInfo"><button type="button" class="btn btn-primary">个人信息</button></a>
    <a href="/user/loginOut"><button type="button" class="btn btn-danger">切换账号</button></a>
    <a href="/user/downloadExcel"><button type="button" class="btn btn-info">导出</button></a>
    <a href="/user/xiazai"><button type="button" class="btn btn-info">下载导入模板</button></a>
    <button type="button" class="btn btn-info" onclick="importData()">导入</button>
    <form name="myForm"  enctype="multipart/form-data">
        <input type="file" style="display: none" onchange="submitFile()" name="img">
    </form>
    <form action="/student/findStudent" method="post">
        <div class="row">

            <div class="col-lg-7">
            </div>

            <div class="col-lg-3">
                <input type="text" class="form-control" name="stuName" style="width: 270px" placeholder="请输入要查询的姓名" >
            </div>
            <div class="col-lg-2">
                <button type="submit" class="btn btn-primary">查询</button>
            </div>

        </div>
    </form>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>联系电话</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${list}" var="student">
            <tr>
                <td>${student.stuName}</td>
                <td>${student.stuNum}</td>
                <td>${student.stuPhone}</td>
                <td>
                    <span class="badge badge-success">${student.deleteFlag eq 0?"正常":""}</span>
                    <span class="badge badge-danger">${student.deleteFlag eq 1?"已删":""}</span>
                </td>
                <td>
                    <a href="/student/ToupdateStudent?stuId=${student.stuId}"><button type="button" class="btn btn-primary">编辑</button></a>
                    <a href="/student/deleteStu/${student.stuId}"><button type="button" class="btn btn-danger">删除</button></a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
</table>
</div>

<!-- 分页标签 -->
<nav class="pageDIV" style="margin-left: 740px">
    <ul class="pagination">
        <%--跳到首页 这里做了判断 如果没有前一页 那么 跳到首页的这个标签是不可点击的 class="disabled" --%>
        <li <c:if test="${!page.hasPreviouse}">class="page-item disabled"</c:if> >
            <a class="page-link" href="?page.start=0">   <%-- 首页的开始数据的索引为0
            点击后会发现地址栏变为 http://localhost:8080/DemoMVC/getlist?page.start=0  是作为参数显式传递的 --%>
                首页
            </a>
        </li>
        <%--跳到前一页 同样做了判断 如果没有前一页 则不可点击前跳 class="disabled" --%>
        <li <c:if test="${!page.hasPreviouse}">class="page-item disabled"</c:if> >
            <%--当前页面数据索引 - 每页显示条数 = 上一页的第一条数据索引 --%>
            <a class="page-link" href="?page.start=${page.start-page.count}&stuName=${stuName}">
                上一页
            </a>
        </li>
        <%--中间的分页  显示各页号--%>
        <%-- begin:开始的元素 end:最后一个元素 varStatus:代表循环状态的变量名称 --%>
        <%-- 比如我一共39条元素 共4页 第一页记为0 最后一页 4-1 =3  --%>
        <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
            <%--这部分解释下--%>
            <%--status.count：从1开始计数  1 2 3 4 ....39--%>
            <%--status.index：从0开始计数  0 1 2 3 ....38--%>
            <%--page.count:   每页数量--%>
            <%---10 <= status.count*page.count-page.start<= 30--%>
            <%--显示当前页码的前两个和后两个就可，例如当前页码为3的时候，就显示 1 2 3(当前页) 4 5 的页码--%>
            <c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
                <%--status.index*page.count==page.start 判断是否是目前的这一页--%>
                <%--举例：status.index = 2  page.count = 10--%>
                <%--第一页 0  第二页 10  第三页 20   （数字指每页第一行的索引）--%>
                <%--如果现在在第三页 那么 2 * 10 = 20  条件成立--%>
                <%--class="disabled"  此页数的标签不可点击--%>
                <%--class="current"   此页数的标签颜色显示为灰色表示目前位置停留在此页 --%>
                <li <c:if test="${status.index*page.count==page.start}">class="page-item disabled"</c:if>>
                    <a class="page-link" href="?page.start=${status.index*page.count}"
                       <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
                    >${status.count}</a>
                </li>
            </c:if>
        </c:forEach>
        <%--跳到下一页 同样做了判断 如果没有下一页 则不可点击后跳 class="disabled" --%>
        <li <c:if test="${!page.hasNext}">class="page-item disabled"</c:if>>
            <a class="page-link" href="?page.start=${page.start+page.count}&stuName=${stuName}">
                下一页
            </a>
        </li>
        <%--跳到尾页 如果没有后一页 那么 跳到尾页的这个标签是不可点击的 class="disabled" --%>
        <li <c:if test="${!page.hasNext}">class="page-item disabled"</c:if>>
            <a class="page-link" href="?page.start=${page.last}&stuName=${stuName}">
                末页
            </a>
        </li>
    </ul>
</nav>

<br>
<!-- 添加模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">添加学生信息</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="stuName">姓名:</label>
                    <input type="text" class="form-control" id="stuName" name="stuName" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="stuPhone">电话号码:</label>
                    <input type="text" class="form-control" id="stuPhone" name="stuPhone" placeholder="请输入电话号码">
                </div>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="subBtn()">保存</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
            <%--</form>--%>

        </div>
    </div>
</div>
</div>



</body>
</html>
